<template>
	<view>
		<view class="card">
			<view class="avator">
				<image alt="" :src="message.avatar" />
			</view>
			<view class="des">
				<view class="des_item">
					姓名: {{message.nickName}}
				</view>
				<view class="des_item">
					年龄: {{message.age}}
				</view>
				<view class="des_item">
					职位: {{type(message.status)}}
				</view>
			</view>
		</view>
		<view class="cardmore">
			<view class="title">
				成员职责
			</view>
			<view class="content">
				{{message.duty}}
			</view>
		</view>
		<view class="cardmore">
			<view class="title">
				成员简介
			</view>
			<view class="content">
				{{message.description}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMember
	} from "../../../api/MemberPage/index.js";
	export default {
		onLoad(options) {
			getMember(options.id).then((res) => {
				this.message = res.data;
			});
		},
		data() {
			return {
				message: {},
			};
		},
		computed: {
			type() {
				return function(res) {
					if (res === 0) {
						return "队长";
					} else if (res === 1) {
						return "副队长";
					} else if (res === 2) {
						return "核心成员";
					} else if (res === 3) {
						return "正式成员";
					}
				};
			},
		},
	};
</script>

<style scoped>
	.card {
		display: flex;
		width: 90%;
		margin: 40rpx auto;
	}

	.avator {
		width: 300rpx;
	}

	.avator image {
		border-radius: 20rpx;
		width: 100%;
		height: 100%;
		box-shadow: 2rpx 4rpx 12rpx #333333;
	}


	.des {
		width: calc(100% - 300rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.des_item {
		font-size: 38rpx;
		font-weight: 400;
		letter-spacing: 4rpx;
		padding: 30rpx;
	}

	.cardmore {
		width: 80%;
		height: 300rpx;
		margin: 60rpx auto;
		padding: 20rpx;
		border: 4rpx solid #ccc;
		border-radius: 20rpx;
		box-shadow: 2rpx 4rpx 12rpx #333333;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		letter-spacing: 2px;
	}

	.content {
		font-size: 28rpx;
		text-indent: 2em;
		letter-spacing: 2px;
		line-height: 2;
	}
</style>